<template>
	<view>
		<div class="user-list" v-for="vo,index in userList">
			<div class="user-img">
				<img class="lazy" :src=" vo.avatar ">
			</div>
			<div class="flex total flex-box-y">
				<div class="displayFlex">
					<div class="user-name flex"> {{vo.user_nickname}} </div>
					<div class="user-recommend"> {{vo.vip}} </div>
				</div>
				<div class="flex"></div>
				<div class="displayFlex">
					<div class="user-vip flex"> {{vo.recommend}} </div>
					<div class="user-time">加入时间： {{vo.create_time}} </div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userList: [],
				loadStatus: ''
			}
		},
		onLoad() {
			this.get_data()
		},
		methods: {
			get_data() {
				this.loadStatus = 'loading';
				//portal/order/my_all_orders
				this.$api.get({
					url: 'portal/my/get_management',
					data: {
						size: 10 ,// 每页显示几条
					},
					success: res => {
						console.log(res.data)
						if (res.code === 1) {
							let userList = res.data;
							// 分页判断
							if (userList.length <= 10) {
								userList.forEach(item => {
									this.userList.push(item);
								});
								this.loadStatus = 'nomore';
							} else {
								this.loadStatus = 'loadmore';
							}
						} else {
							this.$toast(res.msg || '数据获取失败');
						}
					}
				});
			}
		}
	}
</script>

<style>
	body {
		margin: 0;
		padding: 0;
		font-size: 14px;
	}

	#app {
		margin: 10px;
	}

	.user-list {
		margin-bottom: 10px;
		background: #fff;
		box-shadow: 0 0 2px 2px #f1f1f1;
		padding: 10px;
		display: flex;
	}

	.user-img {
		width: 64px;
		height: 64px;
	}

	img {
		width: 100%;
		height: 100%;
	}

	.total {
		margin-left: 10px;
		color: #333;
	}

	.flex-box-y {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		display: -webkit-flex
	}

	.flex {
		flex: 1;
	}

	.vip-right {
		display: flex;
		align-items: center;
	}

	a:link {
		text-decoration: none;
	}

	a:visited {
		text-decoration: none;
	}

	a:hover {
		text-decoration: none;
	}

	a:active {
		text-decoration: none;
	}

	a {
		color: #666;
	}

	.displayFlex {
		display: flex;
	}

	.user-img img {
		border-radius: 0.4rem;
	}
	
	.button.button-fill {
		color: #fff;
		background: #0894ec;
		border: none;
		line-height: 2.35rem;
		width: 120px;
		margin: 15px;
	}
</style>
